<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>

</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      
      1. v-bind="params" 传递多个参数
      2. 参数命名规范
        - 传递参数时，多单词属性通过-连接
        data-abc="123"
        - 接收时通过驼峰接收
        props:['dataAbc']
      3. 单向数据流
      - props是只读的，不能修改
      4. 修改参数的需求
      - 将props接收的值复制给新的变量
      - 修改新的变量
      5. 为什么是单向数据流
      - 组件内修改父组件参数，会导致其他使用父组件变量的组价同时被修改
    */
    const counter = {
      props: ['a', 'b', 'c', 'dataText'],
      template: `<div>
      <p>{{dataText}}:{{a}}--{{b}}--{{c}}</p>
    </div>`
    }
    const app = Vue.createApp({
      components: {
        counter
      },
      data() {
        return {
          params: {
            a: 123,
            b: 456,
            c: 789
          },
        }
      },
      template: `<div>
        <counter v-bind="params" data-text="hello"/>
      </div>`
    })

    const vm = app.mount('#root');
  </script>
</body>

</html>